<template>
    <div class="common-layout" style="margin-left: 70px;margin-right: 70px">
      <el-container>
        <el-aside width="150px">
            <div style="background-color: white;width: 150px;height: 650px;margin-top: 20px;display: flex; flex-direction: column;">
              <router-link to="/personalCenter" class="router">个人中心</router-link>
              <router-link to="/cart" class="router">我的购物车</router-link>
              <router-link to="/myOrder" class="router">我的订单</router-link>
              <router-link to="" class="router">评价管理</router-link>
              <router-link to="" class="router">我的发票</router-link>
              <router-link to="" class="router">我的优惠卷</router-link>
              <router-link to="" class="router">我的积分</router-link>
              <router-link to="" class="router">我的收藏</router-link>
              <router-link to="" class="router">我的足迹</router-link>
              <router-link to="/personalInfo" class="router">个人信息</router-link>
              <router-link to="" class="router">账号设置</router-link>
              <router-link to="" class="router">我的收货地址</router-link>
            </div>
        </el-aside>
        <el-container>
          <el-header>
            <div style="background-color: white;height: auto;width: auto;margin-top: 20px;overflow: hidden;position: relative">
              <h1 style="margin-top: 5px;margin-left: 30px">个人信息</h1>
              <hr style="background: lightgoldenrodyellow;">
              <el-form :model="form" label-width="auto" style="max-width: 600px;margin: auto;margin-top: 100px">
                <el-form-item label="用户头像:">
                  <div style="width: 500px;margin: 0 auto;">
                    <el-upload
                        v-model:file-list="fileList"
                        action="http://localhost:8080/v1/file/upload"
                        name="file"
                        limit="9"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                    >
                      <el-icon><Plus /></el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                      <img w-full :src="dialogImageUrl" alt="Preview Image" />
                    </el-dialog>
                  </div>
                </el-form-item>
                <el-form-item label="昵称:">
                  <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="用户ID:">
                  <span>{{form.id}}</span>
                </el-form-item>

                <el-form-item label="性别:">
                  <el-radio-group v-model="form.gender">
                    <el-radio value="1" label="男"></el-radio>
                    <el-radio value="0" label="女"></el-radio>
                    <el-radio value="2" label="保密"></el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="生日:">
                  <el-col :span="11">
                    <el-date-picker
                        v-model="form.birthday"
                        type="date"
                        style="width: 530px"
                    />
                  </el-col>
                </el-form-item>
              </el-form>
              <div style="margin-top:80px;width: auto;display: flex; justify-content: center; align-items: center;">
                <el-button type="primary" @click="savePersonalVO()">保存</el-button>
                <el-button type="info"><router-link to="/personalCenter" style="text-decoration: none;color: white">关闭</router-link></el-button>
              </div>
            </div>
          </el-header>
        </el-container>
      </el-container>
    </div>
</template>


<script setup>

import {onMounted, ref} from 'vue'
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

// do not use same name with ref
const form = ref({
  username: '',
  birthday: '',
  id:'',
  gender:'',
})

const user = ref(getUser());

const selectPersonalVO = () => {
  form.value.username = "彭于晏" ;
  // form.username = user.value.name;
  let data = qs.stringify(form.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/personal/select?' + data).then((response) => {
    if (response.data.code == 2000) {
      form.value = response.data.data;
      console.log(response.data.data);
    } else {
      ElMessage(response.data.msg);
    }
  })
}

const savePersonalVO = () =>{
  let data = qs.stringify(form.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/personal/update', data).then((response) => {
    if (response.data.code == 2000) {
      form.value = response.data.data;
      console.log(response.data.data);
    } else {
      ElMessage(response.data.msg);
    }
  })
}

onMounted(()=>{
  selectPersonalVO();
})

</script>

<style scoped>
.router {
  margin-bottom: 10px;
  text-decoration: none;
  margin-left: 40px;
  margin-top: 10px;
}

.router:hover {
  /* 鼠标悬浮时的样式 */
  color: red; /* 例如，改变文字颜色为红色 */
}

svg {
  /* 根据需要设置SVG的宽度和高度，以确保它们与文本对齐 */
  width: 20px; /* 或者其他合适的值 */
  height: 30px; /* 或者其他合适的值，注意与文本行高匹配 */
  vertical-align: middle; /* 使SVG与文本垂直居中对齐 */
  margin-right: 30px;
  /* 其他样式... */
}

span {
  vertical-align: middle; /* 确保文本与SVG垂直居中对齐 */
  /* 其他样式... */
}
</style>